<template>
  <el-dialog
    width="70%"
    :title="title"
    :visible.sync="dialogFormVisible"
    @close="close"
  >
    <div class="card-container">
      <el-card shadow="hover" class="card">
        <vab-query-form>
          <el-button icon="el-icon-plus" type="primary" @click="showHandleBind">
            绑定项目
          </el-button>
        </vab-query-form>
        <el-table
          v-loading="bindBuildingLoading"
          :data="bindBuildingList"
          :element-loading-text="elementLoadingText"
          :height="height"
        >
          <el-table-column
            show-overflow-tooltip
            prop="businessRealEstateVO.floorName"
            label="项目名称"
            width="100px"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="装修情况"
            prop="businessRealEstateVO.base.renovationCondition"
            width="100px"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="建筑类别"
            prop="businessRealEstateVO.base.buildingCategory"
            width="100px"
          ></el-table-column>
          <el-table-column width="100px" show-overflow-tooltip label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="handleUnbindBuilding(row)">
                解绑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- <el-card shadow="hover" class="card">
        <vab-query-form>
          <el-button icon="el-icon-plus" type="primary" @click="showHouseBind">
            绑定房源
          </el-button>
        </vab-query-form>
        <el-table
          v-loading="listLoading"
          :data="bindHouseList"
          :element-loading-text="elementLoadingText"
          :height="height"
        >
          <el-table-column
            show-overflow-tooltip
            prop="realEstateVO.projectName"
            label="项目名称"
            width="100"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="房屋类型"
            prop="realEstateVO.estateType"
            width="120"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="楼栋"
            prop="realEstateVO.building"
            width="80"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="单元"
            prop="realEstateVO.unit"
            width="80"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="房间号"
            prop="realEstateVO.num"
            width="80"
          ></el-table-column>
          <el-table-column width="100px" show-overflow-tooltip label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="handleUnbindHouse(row)">
                解绑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card> -->
    </div>
    <!-- 项目对话框 -->
    <el-dialog
      title="选择绑定的项目"
      :visible.sync="buildingDialogFormVisible"
      append-to-body
      @close="buildingClose"
    >
      <vab-query-form>
        <el-form
          :model="buildingQueryForm"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input
              v-model.trim="buildingQueryForm.queryBean.floorName"
              placeholder="项目名称"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              native-type="submit"
              @click="handleBuildingQuery"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form>
      <el-table
        v-loading="buildingListLoading"
        :data="buildingList"
        :element-loading-text="elementLoadingText"
        :height="height"
      >
        <el-table-column
          show-overflow-tooltip
          prop="floorName"
          label="项目名称"
          width="100px"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="开盘时间"
          prop="base.openingQuotation"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="装修情况"
          prop="base.renovationCondition"
          width="100px"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="建筑类别"
          prop="base.buildingCategory"
          width="100px"
        ></el-table-column>
        <el-table-column show-overflow-tooltip label="操作" width="180px">
          <template #default="{ row }">
            <el-button type="text" @click="handleBindBuilding(row)">
              绑定
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :background="background"
        :current-page="buildingQueryForm.pageNum"
        :layout="layout"
        :page-size="buildingQueryForm.pageSize"
        :total="buildingTotal"
        @current-change="bindBuildingHandleCurrentChange"
        @size-change="BuildingHandleSizeChange"
      ></el-pagination>
    </el-dialog>
    <!-- 房源对话框 -->
    <!-- <el-dialog
      title="选择绑定的房源"
      :visible.sync="bindHouseDialogFormVisible"
      append-to-body
      @close="houseClose"
    >
      <vab-query-form>
        <el-form :model="houseQueryForm" :inline="true" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model.trim="houseQueryForm.queryBean.estateType"
              placeholder="房源类型"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model.trim="houseQueryForm.queryBean.building"
              placeholder="楼栋号"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model.trim="houseQueryForm.queryBean.projectName"
              placeholder="项目名称"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              native-type="submit"
              @click="handleHouseQuery"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form>
      <el-table
        v-loading="houseListLoading"
        :data="houseList"
        :element-loading-text="elementLoadingText"
        :height="height"
      >
        <el-table-column
          show-overflow-tooltip
          prop="projectName"
          label="项目名称"
          width="100"
        ></el-table-column>

        <el-table-column
          show-overflow-tooltip
          label="房屋类型"
          prop="estateType"
          width="120"
        ></el-table-column>

        <el-table-column
          show-overflow-tooltip
          label="楼栋"
          prop="building"
          width="80"
        ></el-table-column>

        <el-table-column
          show-overflow-tooltip
          label="单元"
          prop="unit"
          width="80"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="房间号"
          prop="num"
          width="80"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="address"
          label="地址"
        ></el-table-column>
        <el-table-column width="100px" show-overflow-tooltip label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="handleBindHouse(row)">
              绑定
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :background="background"
        :current-page="houseQueryForm.pageNum"
        :layout="layout"
        :page-size="houseQueryForm.pageSize"
        :total="housesTotal"
        @current-change="handleHouseCurrentChange"
        @size-change="handleHouseSizeChange"
      ></el-pagination>
    </el-dialog> -->
  </el-dialog>
</template>

<script>
  import { fetchBuildingList, unbindEstate } from '@/api/building'
  import { fetchHouseList } from '@/api/house'
  import { getByQuery, addUserBusinessEstate } from '@/api/user'
  import { bindRelation, deleteRelation } from '@/api/userManagement'

  export default {
    name: 'SetProject',
    components: {},
    data() {
      return {
        //已绑定的房源列表
        bindHouseList: [],
        listLoading: true,
        total: 0,
        queryForm: {
          pageNum: 1,
          pageSize: 10,
          queryBean: {},
        },
        //已绑定的项目列表
        bindBuildingLoading: false,
        bindBuildingList: [],
        bindBuildingQueryForm: {
          pageNum: 1,
          pageSize: 10,
          queryBean: {},
        },
        bindBuildingTotal: 0,

        //项目对话框
        buildingList: [],
        buildingListLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        buildingTotal: 0,
        background: true,
        elementLoadingText: '正在加载...',
        buildingQueryForm: {
          pageNum: 1,
          pageSize: 20,
          queryBean: {},
        },
        //房源对话框
        houseList: [],
        houseListLoading: true,
        housesTotal: 0,
        houseQueryForm: {
          pageNum: 1,
          pageSize: 10,
          queryBean: {},
        },
        title: '',
        dialogFormVisible: false,
        buildingDialogFormVisible: false,
        bindHouseDialogFormVisible: false,
        byQuery: {
          estateId: '',
          estateType: 0,
          roleId: '',
          userId: '',
        },
        estate: '',
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight()
      },
    },
    methods: {
      init() {
        this.fetchBuildingData()
        // 已绑定项目
        this.bindBuildingFetchData()
        // this.fetchHouseData()
        // 已绑定房源
        // this.fetchData()
      },
      showEdit(row) {
        if (!row) {
          console.log('未选择对应row')
        } else {
          this.title = '配置项目或房源'
          this.estate = Object.assign({}, row)
          this.dialogFormVisible = true
          this.init()
        }
      },
      showHandleBind() {
        this.buildingDialogFormVisible = true
      },
      showHouseBind() {
        this.bindHouseDialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
      },
      buildingClose() {
        this.buildingDialogFormVisible = false
      },
      houseClose() {
        this.bindHouseDialogFormVisible = false
      },
      async handleBindBuilding(row) {
        this.byQuery.estateType = 2
        this.byQuery.estateId = row.floorId
        const { data } = await addUserBusinessEstate(this.byQuery)
        if (data.message == '成功') {
          this.buildingDialogFormVisible = false
          this.$baseNotify('绑定数据成功！', '成功', 'success', 'top-right')
          this.bindBuildingFetchData()
        } else {
          this.$baseNotify('绑定数据失败！', '失败', 'error', 'top-right')
        }
      },
      async handleUnbindBuilding(row) {
        let _push_form = {}
        _push_form.userId = row.userId
        _push_form.estateId = row.estateId
        console.log(_push_form)
        const { data } = await unbindEstate(_push_form)
        if (data.status == 0) {
          this.$baseMessage('解绑成功！', 'success')
          this.bindBuildingFetchData()
        } else {
          this.$baseMessage(data.message, 'error')
        }
      },
      // async handleBindHouse(row) {
      //   this.byQuery.estateType = 1
      //   this.byQuery.estateId = row.estateId
      //   const { data } = await addUserBusinessEstate(this.byQuery)
      //   if (data.message == '成功') {
      //     this.bindHouseDialogFormVisible = false
      //     this.$baseNotify('绑定数据成功！', '成功', 'success', 'top-right')
      //     this.fetchData()
      //   } else {
      //     this.$baseNotify('绑定数据失败！', '失败', 'error', 'top-right')
      //   }
      // },
      // async handleUnbindHouse(row) {
      //   let _push_form = {}
      //   _push_form.userId = row.userId
      //   _push_form.estateId = row.estateId
      //   const { data } = await unbindEstate(_push_form)
      //   if (data.status == 0) {
      //     this.$baseMessage('解绑成功！', 'success')
      //     this.fetchData()
      //   } else {
      //     this.$baseMessage(data.message, 'error')
      //   }
      // },
      BuildingHandleSizeChange(val) {
        this.buildingQueryForm.pageSize = val
        this.fetchBuildingData()
      },
      bindBuildingHandleSizeChange(val) {
        this.bindBuildingQueryForm.pageSize = val
        this.bindBuildingFetchData()
      },
      BuildingHandleCurrentChange(val) {
        this.buildingQueryForm.pageNum = val
        this.fetchBuildingData()
      },
      bindBuildingHandleCurrentChange(val) {
        this.bindBuildingQueryForm.pageNum = val
        this.bindBuildingFetchData()
      },
      handleBuildingQuery() {
        this.fetchBuildingData()
      },
      // handleHouseSizeChange(val) {
      //   this.houseQueryForm.pageSize = val
      //   this.fetchHouseData()
      // },
      // handleHouseCurrentChange(val) {
      //   this.houseQueryForm.pageNum = val
      //   this.fetchHouseData()
      // },
      // handleHouseQuery() {
      //   this.houseQueryForm.pageNum = 1
      //   this.fetchHouseData()
      // },
      //获取所有房源列表
      // async fetchHouseData() {
      //   this.houseListLoading = true
      //   const { data } = await fetchHouseList(this.houseQueryForm)
      //   const { body } = data
      //   this.houseList = body.data
      //   this.$baseNotify(
      //     '单页房源数据获取完毕！',
      //     '成功',
      //     'success',
      //     'top-right'
      //   )
      //   this.housesTotal = body.totalSize
      //   setTimeout(() => {
      //     this.houseListLoading = false
      //   }, 500)
      // },
      // handleSizeChange(val) {
      //   this.queryForm.pageSize = val
      //   this.fetchData()
      // },
      // handleCurrentChange(val) {
      //   this.queryForm.pageNum = val
      //   this.fetchData()
      // },
      // handleQuery() {
      //   this.queryForm.pageNum = 1
      //   this.fetchData()
      // },
      // //获取已绑定房源列表
      // async fetchData() {
      //   this.listLoading = false
      //   this.byQuery.estateId = ''
      //   this.byQuery.roleId = this.estate.roleId
      //   this.byQuery.userId = this.estate.userId
      //   this.byQuery.estateType = 1
      //   const { data } = await getByQuery(this.byQuery)
      //   this.bindHouseList = data.body
      //   this.total = data.body.length
      //   this.$baseNotify(
      //     '已绑定房源数据获取完毕！',
      //     '成功',
      //     'success',
      //     'top-right'
      //   )
      // },
      // 获取单页项目列表
      async fetchBuildingData() {
        this.buildingListLoading = true
        const { data } = await fetchBuildingList(this.buildingQueryForm)
        const { body, message } = data
        if (message == '成功') {
          const { data, totalSize } = body
          this.buildingTotal = totalSize
          this.buildingList = data
          this.$baseNotify(
            '单页项目数据获取完毕！',
            '成功',
            'success',
            'top-right'
          )
          console.log(data)
        }
        this.buildingListLoading = false
      },
      // 获取已绑定项目列表
      async bindBuildingFetchData() {
        // this.bindBuildingLoading = true
        this.byQuery.roleId = this.estate.roleId
        this.byQuery.userId = this.estate.userId
        this.byQuery.estateId = ''
        this.byQuery.estateType = 2
        const { data } = await getByQuery(this.byQuery)
        const { body, message } = data
        if (message == '成功') {
          this.bindBuildingTotal = body.totalSize
          this.bindBuildingList = body
          this.$baseNotify(
            '已绑定数据获取完毕！',
            '成功',
            'success',
            'top-right'
          )
        }
        this.bindBuildingLoading = false
      },
    },
  }
</script>
<style lang="scss" scoped>
  .card-container {
    display: flex;
    flex-direction: row;
    .card {
      width: 100%;
      margin-left: 10px;
    }
  }
</style>
